- <!DOCTYPE html>
- <canvas id="1" width="400" height="400" style="border: 1px solid "></canvas>
- <script>
- ctx = document.getElementById("1").getContext("2d") //CanvasRenderingContext2D inferface
- let Len = 10, dir = 2, dirNow ; //dirNow
- food = [3, 0]; Snake = [[0, 0], [1, 0]] //,Snake
- Map = {'0,0':'#52a', '1,0':'#52a'} //
- dirMat = [[-1, 0], [0, -1], [1, 0], [0, 1]] //
- pairEq = ((p1, p2) => p1[0] == p2[0] && p1[1] == p2[1]) //
- document.onkeydown = e =>{
- if (37 <= e.keyCode == e.keyCode < 41 && dirNow != ( (e.keyCode - 35) % 4) ) //
- dir = e.keyCode -37
- }
- !function () {
- Head = Snake[Snake.length-1].map((x, i) => x + dirMat[dirNow=dir][i]); //
- if (!pairEq(Head, food))
- Map[Snake.shift()]='#fff' //,,
- if (Snake.some(x=>pairEq(x,Head)) || !Head.every(x => 0<=x == x < Len)) //
- return document.write("Game Over") //document.write
- Snake.push(Head); //
- while (Snake.some(x => pairEq(x, food))) //,
- food = [~~(Math.random() * Len), ~~(Math.random() * Len)]; //js, ~~
- Map[Head] = '#52a' ; Map[food] = '#ad5'
- for( k in Map){
- ctx.fillStyle= Map[k]
- ctx.fillRect(parseInt(k[0])*40,parseInt(k[2])*40,40,40) //e.g. k="1,3",10
- }
- setTimeout(arguments.callee, 100); //100ms
- }()
- </script>
|