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星系,有一颗色彩斑斓的宜居星球 ,星际移民 ...
随机推荐
- EEPROM、Flash有关知识
存储器分为两大类:RAM(Random Access Memory,任意地址访问储存器)和ROM(Read-Only Memory,只读储存器). 发展历史 ROM Read-Only Memory, ...
- 基于MCU的SD卡fat文件系统读写移植
背景 https://blog.csdn.net/huang20083200056/article/details/78508490 SD卡(Secure Digital Memory Card)具有 ...
- 解析QAnything启动命令过程
一.启动命令过程日志 启动命令bash ./run.sh -c local -i 0 -b hf -m Qwen-1_8B-Chat -t qwen-7b-chat.输入日志如下所示: root@MM ...
- C#开发一个混合Windows服务和Windows窗体的程序
很多时候,我们希望服务程序可以直接运行,或者可以响应一些参数,这时候,混合Windows服务和Windows窗体的程序就排上用场了.要实现同时支持Windows服务和Windows窗体,需要在启动的第 ...
- spring-关于组件的注入及获取流程
一.组件注入的基本流程: 容器初始化: Spring应用启动时,会读取配置(如XML配置.注解配置等),并根据这些配置创建Bean定义(BeanDefinition). 根据Bean定义,Spring ...
- LabVIEW的自定义按钮
下载几张图片: 比较好的 网站1:https://www.iconfont.cn/ 网站2:https://yesicon.app/ 选用windows风格按钮控件进行自定义, 自定义的图片分别放入这 ...
- CM3调试系统简析
CM3 调试系统简析 **"一直以来,单片机的调试一直不是很突出的主题,很多简单些的程序在开发中,甚至都没有调试的概念,而只是把生成的映像直接烧入片子,再根据错误症状来判断问题,然后修改程序 ...
- 推荐一枚宝藏Up主，顺便聊聊感想
众所周知,B站是学习网站 最近发现一宝藏Up主,主要做科普,主题包括但不限于:大模型的底层算法.量子计算底层原理和硬件设计,以及其他物理或者自然科学主题,总体偏向于理工科. 值得推荐的理由:Up主对底 ...
- 3.3 Y86-64的顺序实现
将处理组织成阶段 为了实现流水线处理机制,要将指令组织成某个特殊的阶段序列,所有的指令遵循统一的序列,不同阶段放在不同硬件上进行处理.下面是对各阶段的简述. 取指(fetch):取指阶段从内存读取指令 ...
- TypeScript 学习笔记 — 模板字符串和类型体操（十五）
目录 基本介绍 字符串类型体操实操环节 1. 字符串首字母大写 CapitalizeString 2. 获取字符串第一个字符 FirstChar 3. 获取字符串最后一个字符 LastChar 4. ...