はじめに

この本を読んだので、とりあえずつくってみようとおもいました

SnakeBiyte風ゲーム

コード

本にあった内容のコードを少し変更して、ボタン操作にしました。
そうしないとスマートフォンからは動かすことができなかったので。

やり方としては、クリックのイベントを利用して、タグのvalueごとに向きを変えてます
あとリロードしなくても良いように初期化するボタンも追加してます

<input type="button" value="最初から" style="width:100px;height:50px" onclick="reset()">
<canvas  style="background-color:yellow;" height="400" width="400" id="field"></canvas>
<table border="0">
  <tr>
    <td style="border-style: none;"></td>
    <td style="border-style: none;"><input type="button" value="↑" style="width:50px;height:50px"></td>
    <td style="border-style: none;"></td>
  </tr>
  <tr>
    <td style="border-style: none;"><input type="button" value="←" style="width:50px;height:50px"></td>
    <td style="border-style: none;"></td>
    <td style="border-style: none;"><input type="button" value="→" style="width:50px;height:50px"></td>
  </tr>
  <tr>
    <td style="border-style: none;"></td>
    <td style="border-style: none;"><input type="button" value="↓" style="width:50px;height:50px"></td>
    <td style="border-style: none;"></td>
  </tr>
</table>
<br/>


<script>
"use strict";
var W, H, S = 20;
var snake = [];
var foods = [];
var keyCode = 0;
var point = 0;
var timer = NaN;
var ctx;

//Point Object
function Point(x, y){
	this.x = x;
	this.y = y;
}

//Init Function
function init(){
	var canvas = document.getElementById('field');
	W = canvas.width / S;
	H = canvas.height / S;
	ctx = canvas.getContext('2d');
	ctx.font = "20px sans-serif";

	// snake
	snake.push(new Point(W / 2, H / 2));

	// foods
	for(var i = 0 ; i<10 ; i++){
		addFood();
	}

	timer = setInterval("tick()",200);
	document.onclick = clickbutton;
}

// add food function
function addFood(){
	while(true){
		var x = Math.floor(Math.random()*W);
		var y = Math.floor(Math.random()*H);

		if(isHit(foods, x, y) || isHit(snake, x, y)){
			continue;
		}


		foods.push(new Point(x,y));
		break;
	}
}

// Hit
function isHit(data, x, y){
	for(var i = 0;i<data.length ;i++){
		if(data[i].x == x && data[i].y == y){
			return true;
		}
	}
	return false;
}

// Move Food
function moveFood(x, y){
	foods = foods.filter(function(p){
		return(p.x !=x || p.y !=y);
	});
	addFood();
}

// Move Snake
function tick(){
	var x = snake[0].x;
	var y = snake[0].y;

	console.log(keyCode);

	switch(keyCode){
		// Left
		case "←": x--; break;
		// Up
		case "↑": y--; break;
		// Right
		case "→": x++; break;
		// Down
		case "↓": y++; break;
		default: paint(); return;
	}


	if(isHit(snake, x, y) || x < 0 || x >= W || y<0 || y >= H){
		clearInterval(timer);
		paint();
		return;
	}

	// new head
	snake.unshift(new Point(x, y));

	if(isHit(foods, x, y)){
		// eat food
		point += 10;
		moveFood(x, y);
	}else{
		// do not eat food
		snake.pop();
	}
	paint();
}

// drow
function paint(){
	ctx.clearRect(0, 0, W * S, H * S);
	ctx.fillStyle = "rgb(256,0,0)";
	ctx.fillText(point, S,S * 2);
	ctx.fillStyle = "rgb(0,0,255)";

	foods.forEach(function(p){
		ctx.fillText("+",p. x*S, (p.y+1)*S);
	});
	snake.forEach(function(p){
		ctx.fillText("*",p. x*S, (p.y+1)*S);
	});
}

function clickbutton(event){
	keyCode = event.srcElement.defaultValue;
}
function reset(){
	W, H, S = 20;
	snake = [];
	foods = [];
	keyCode = 0;
	point = 0;
	timer = NaN;
	init();
}
init();
</script>