AI game creator

Click here for free DL of the app version that can save data.

No:3625

6830

←

Prev Next

→

Tap to Fencing
Developer anonymous｜Date and time 70/1/1 9:00:01
Build time unknown sec｜Game capacity 3.62KB｜

Script

をするゲームを作りました。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

Click here for free DL of the app version that can save data.

をするゲームを作りました。

<!DOCTYPE html>
<html>
<head>
	<title>Fencing Game</title>
	<style>
		body{
			margin: 0;
			padding: 0;
		}
		#fencer1{
			width: 200px;
			height: 300px;
			position: absolute;
			top: 50%;
			left: 5%;
			transform: translateY(-50%);
			background-color: #ffcc66;
			border: 2px solid #333;
			border-radius: 5px;
		}
		#fencer2{
			width: 200px;
			height: 300px;
			position: absolute;
			top: 50%;
			right: 5%;
			transform: translateY(-50%);
			background-color: #66ccff;
			border: 2px solid #333;
			border-radius: 5px;
		}
		#sword{
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -10px;
			margin-left: -70px;
			width: 140px;
			height: 20px;
			background-color: #333;
			border-radius: 5px;
		}
	</style>
</head>
<body>
	<div id="fencer1"></div>
	<div id="fencer2"></div>
	<div id="sword"></div>
	<script>
		var fencer1 = document.getElementById("fencer1");
		var fencer2 = document.getElementById("fencer2");
		var sword = document.getElementById("sword");
		var gameOn = false;
		var speed = 20;
		var swordSpeed = 50;
		var swordDirection = 1; // positive direction
		var swordPosition = 50;
		var fencer1Position = 50;
		var fencer2Position = 50;
		var fencer1Direction = 1; // positive direction
		var fencer2Direction = -1; // negative direction
		var moveFencer1 = function(){
			if(fencer1Direction == 1){ // moving down
				fencer1Position++;
				if(fencer1Position > 85){ // reverse direction
					fencer1Direction = -1;
				}
			}else{ // moving up
				fencer1Position--;
				if(fencer1Position < 15){ // reverse direction
					fencer1Direction = 1;
				}
			}
			fencer1.style.top = fencer1Position + "%";
			if(gameOn){ // check for collision
				if(fencer1Position == swordPosition && swordDirection == 1){
					alert("Fencer 2 wins!");
					gameOn = false;
				}
			}
		};
		var moveFencer2 = function(){
			if(fencer2Direction == 1){ // moving down
				fencer2Position++;
				if(fencer2Position > 85){ // reverse direction
					fencer2Direction = -1;
				}
			}else{ // moving up
				fencer2Position--;
				if(fencer2Position < 15){ // reverse direction
					fencer2Direction = 1;
				}
			}
			fencer2.style.top = fencer2Position + "%";
			if(gameOn){ // check for collision
				if(fencer2Position == swordPosition && swordDirection == -1){
					alert("Fencer 1 wins!");
					gameOn = false;
				}
			}
		};
		var moveSword = function(){
			if(swordDirection == 1){ // moving right
				swordPosition += swordSpeed/100;
				if(swordPosition > 90){ // reverse direction
					swordDirection = -1;
					sword.style.backgroundColor = "#cc3333";
				}
			}else{ // moving left
				swordPosition -= swordSpeed/100;
				if(swordPosition < 10){ // reverse direction
					swordDirection = 1;
					sword.style.backgroundColor = "#333";
				}
			}
			sword.style.left = swordPosition + "%";
			if(gameOn){ // check for collision
				if(swordPosition == fencer1Position && swordDirection == -1){
					alert("Fencer 2 wins!");
					gameOn = false;
				}else if(swordPosition == fencer2Position && swordDirection == 1){
					alert("Fencer 1 wins!");
					gameOn = false;
				}
			}
		};
		document.addEventListener("DOMContentLoaded", function(){
			setInterval(moveFencer1, speed);
			setInterval(moveFencer2, speed);
			setInterval(moveSword, speed);
			document.addEventListener("click", function(){
				if(gameOn){ // stop game
					gameOn = false;
					document.body.style.backgroundColor = "#eee";
				}else{ // start game
					gameOn = true;
					document.body.style.backgroundColor = "#fff";
				}
			});
		});
	</script>
</body>
</html>