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>
HTML+CSS+JS实现的贪吃球小游戏【转】的更多相关文章
- html+css+js实现狼吃羊小游戏
html+css+js实现狼吃羊小游戏 一.总结 一句话总结:给动的元素下标记,这里表现为将要活动的标签动态增加class,这是一种很好的思想. 1.如何实现棋子走动的时候简单精确定位? 用重构坐标系 ...
- 用js写一个贪吃蛇小游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS高级---案例：贪吃蛇小游戏
案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...
- JS练习实例--编写经典小游戏俄罗斯方块
最近在学习JavaScript,想编一些实例练练手,之前编了个贪吃蛇,但是实现时没有注意使用面向对象的思想,实现起来也比较简单所以就不总结了,今天就总结下俄罗斯方块小游戏的思路和实现吧(需要下载代码也 ...
- C++ 简单的控制台贪吃蛇小游戏
由于比较懒,所以不怎么写,觉得这样不应该.我应该对自己学的做出整理,不管是高端低端,写出来是自己的. // 贪吃蛇.cpp : 定义控制台应用程序的入口点. // #include "std ...
- 贪吃蛇小游戏-----C语言实现
1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...
- js实现简单的俄罗斯方块小游戏
js实现简单的俄罗斯方块小游戏 开始 1. 创建一个宽为 200px,高为 360px 的背景容器 <!DOCTYPE html> <html lang="en" ...
- Java GUI学习,贪吃蛇小游戏
JAVA GUI练习 贪吃蛇小游戏 前几天虽然生病了,但还是跟着狂神学习了GUI的方面,跟着练习了贪吃蛇的小项目,这里有狂神写的源码点我下载,还有我跟着敲的点我下载,嘿嘿,也就注释了下重要的地方,这方 ...
- 用GUI实现java版贪吃蛇小游戏
项目结构 新建一个JFrame窗口,作为程序入口 public class GameStart{ public static void main(String[] args) { JFrame jFr ...
- Three.js 实现3D开放世界小游戏：阿狸的多元宇宙 🦊
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民 ...
随机推荐
- CNN -- Simple Residual Network
Smiling & Weeping ---- 我爱你,从这里一直到月亮,再绕回来 说明: 1.要解决的问题:梯度消失 2. 跳连接,H(x) = F(x)+x,张量维度必须一致,加完后再激活. ...
- 原生js或者是es中让人厌恶的一些地方
js总体来说,是个不错的语言,最大的好处的是简单. 但这个基于es6的一些js也有一些非常怪异的写法,这是非常令人憎恶的地方. c++总体上也算不错,但为什么不是很受欢迎,因为它把自己搞得太复杂了,复 ...
- java ListMap使用多个或者任意个数的key进行排序
使用JAVA自己的排序方法,有的时候是一个可行的选择. 先从简单的开始说起. 一.少数key的情况 有一个需求:根据 menu_level,sort排序,越小的越前面. -- 下面代码按照升序规则进行 ...
- itunes同步视频
itunes同步视频不要通过影片同步,而是通过照片同步 如果显示的是iCloud,只需在手机或ipad上,设置里icloud中,包照片的iCloud关掉,然后重连一下就行
- 如何在不能求逆的时候做子集卷积 exp（即便能求逆也比常见方法优雅）
为什么要求逆?正常做子集卷积 exp 的时候递推求 \(G=\exp(F)\) 的系数时要用. 什么情况下不能求逆?模 \(2^{64}\),或者压根不取模. 我们可能会想,算出来肯定除得尽啊,因为组 ...
- 【资料分享】Xilinx Zynq-7010/7020工业评估板规格书（双核ARM Cortex-A9 + FPGA，主频766MHz）
1 评估板简介 创龙科技TLZ7x-EasyEVM是一款基于Xilinx Zynq-7000系列XC7Z010/XC7Z020高性能低功耗处理器设计的异构多核SoC评估板,处理器集成PS端双核ARM ...
- jsp+servlet+mysql-----------批量删除
jsp: <div class="result-wrap"> <form action="${pageContext.request.contextPa ...
- 对linux的理解--个人理解
linux系统中的命令我觉得可以和windows上的点点点,如文件的查找,文件的新建.删除,用户的添加.删除等来对比理解.一个是点点点,一个是用命令来完成. --------------------- ...
- webpack4.15.1 学习笔记(一) — 基本概念
目录 入口(entry) 出口(output) 加载器 Loaders 插件 Plugins 模式 webpack.config.js 配置 终终终终于下定决心,对你下手了,系统的学习一下. webp ...
- TokenObtainPairSerialize
TokenObtainPairSerializer是Django REST framework的SimpleJWT库提供的序列化器.它用于对用户凭据(如用户名和密码)进行序列化和验证,并在成功的身份验 ...