HTML+CSS+JS实现的贪吃球小游戏【转】
转载地址：【https://blog.csdn.net/qq_43115104/article/details/84228987】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>贪吃球大作战</title> <style> #d01{ width: 606px; margin: 20px auto; } #c01{ border-top: 3px solid #80ffff; border-right: 3px solid #00ff00; border-bottom: 3px solid #ff0000; border-left: 3px solid #ff8080; background-color: black; } #d02{ width: 606px; margin-top: 5px; margin-bottom: 5px; text-align: center; font-size:12px; font-style: italic; } #i01{ display: block; margin-left: 200px; float: left; } #i02{ display: block; margin-right: 200px; float: right; } </style> </head> <body onkeydown="doKeyDown(event)"> <div id="d01"> <canvas id="c01" width="600" height="500"></canvas><!--画布--> <div id="d02"></div><!--提示框--> <input type="button" value="重新开始" onClick="rest()" id="i01"> <input type="button" value="游戏说明" onClick="explain()" id="i02"> </div> <script type="text/javascript"> var canvas = document.getElementById("c01"); var context = canvas.getContext("2d"); var tooltip = document.getElementById("d02"); var Serpengo = {//红色贪吃球 "x" : 100, "y" : 100, "r" : 8, "color" : "red" } var Circle = {//蓝色小球 "x" : 50, "y" : 50, "r" : 4, "color" : "blue" } var Rect = {//绿色方块 "x" : 200, "y" : 200, "width" : 8, "height" : 8, "color" : "green" } function rest() {//重置 Serpengo.r = 8; draw(); drawFood(); } function draw() { var width = 600; var height = 500; //清空画布 context.clearRect(0, 0, width, height); //绘制贪吃球 context.fillStyle = Serpengo.color; context.beginPath(); context.arc(Serpengo.x, Serpengo.y, Serpengo.r, 0, Math.PI * 2, true); context.fill(); } window.addEventListener("load", draw, true); function doKeyDown(event) { var flag=false;//接触旗帜 switch (event.keyCode) { case 38://上键头 if(Serpengo.y<=0) {//边界判断 break; } Serpengo.y -= 4; draw(); break; case 40://下键头 if(Serpengo.y>=500) {//边界判断 break; } Serpengo.y += 4; draw(); break; case 37://左键头 if(Serpengo.x<=0) {//边界判断 break; } Serpengo.x -= 4; draw(); break; case 39://右箭头 if(Serpengo.x>=600) {//边界判断 break; } Serpengo.x += 4; draw(); break; } if ((Serpengo.x - Circle.x) * (Serpengo.x - Circle.x) + (Serpengo.y - Circle.y) * (Serpengo.y - Circle.y) <= (Serpengo.r + Circle.r) * (Serpengo.r + Circle.r)) {//判断红色贪吃球与蓝色小球是否接触 circleRandom(); Serpengo.r += 2; flag=true; } if ((Serpengo.x - Rect.x) * (Serpengo.x - Rect.x) + (Serpengo.y - Rect.y) * (Serpengo.y - Rect.y) <= (Serpengo.r + 6) * (Serpengo.r + 6)) {//判断红色贪吃球与绿色方块是否接触 rectRandom(); Serpengo.r += 2; flag=true; } if (Serpengo.r > 200) {//贪吃球上限设置 Serpengo.r = 200; } if(flag){//接触到了就重画 draw(); } drawFood(); } function drawFood() { drawCircle(); drawRect(); } function drawCircle() { context.fillStyle = Circle.color; context.beginPath(); context.arc(Circle.x, Circle.y, Circle.r, 0, Math.PI * 2, true); context.fill(); } window.addEventListener("load", drawCircle, true); function circleRandom() { Circle.x = Math.random(); Circle.x = Math.ceil(Circle.x * 600); Circle.y = Math.random(); Circle.y = Math.ceil(Circle.y * 500); } function drawRect() { context.fillStyle = Rect.color; context.beginPath(); context.rect(Rect.x, Rect.y, Rect.width, Rect.height); context.fill(); } window.addEventListener("load", drawRect, true); function rectRandom() { Rect.x = Math.random(); Rect.x = Math.ceil(Rect.x * 600); Rect.y = Math.random(); Rect.y = Math.ceil(Rect.y * 500); } var showhelp = false; function explain() { showhelp = !showhelp; if (showhelp) { tooltip.innerHTML = "用键盘的上、下、左、右键移动红色贪吃球，吃掉蓝色小球或者绿色方块，可以让红色贪吃球变大，直到红色贪吃球半径大至所设置的上限。"; } else { tooltip.innerHTML = "贪吃球大作战"; } } </script> </body> </html>
