html+css+js实现打砖块小游戏
简介
游戏要求
打砖块的小游戏对于许多同学来说是熟悉的，这个小游戏的逻辑如下：
1、添加挡板、小球、砖块等角色；
2、设置挡板随鼠标移动；
3、设置小球不断运行，在遇到挡板时反弹；
4、设置砖块被小球击中时消失，并克隆下一个砖块；
5、设置计分；
6、判断游戏结束（以小球低于档板为游戏结束）。.
运行结果
这个的运行效果是这个样子的，一个打砖块的游戏，点击中间的start然后就可以玩了。
完整代码
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>Document</title></head><body><canvas id="canvas"></canvas><button id="start" onclick="start()">START</button></body></html><script src="script.js"></script>
style.css
* {margin: 0;padding: 0;}body {background: #333;}#canvas {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);border: 1px solid white;/* cursor:none; */filter: drop-shadow(0 0 2px white);}#start {width: 120px;height: 40px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-size: 28px;padding: 5px;border-radius: 4px;display: flex;background: rgba(255, 255, 255, 0.4);justify-content: center;}
JS
var canvas = document.getElementById("canvas")var ctx = canvas.getContext("2d")canvas.width = 800canvas.height = 600var blocks = [] //砖块数组var board = {//反弹板x: 350,y: 580,long: 100}var cRect = canvas.getBoundingClientRect() //画布位置var ball = {//定义弹球对象color: "white"}var score = 0 //分数var rungame = false //默认运行状态var colors = [ //颜色数组"#eccc68","#ff7f50","#ff6b81","#7bed9f","#5352ed","#70a1ff"]var speed = 0.3 //弹球移动速度var run = document.getElementById("start")var fires = [] //烟火数组function start() {newgame()rungame = truerun.style.display = "none"canvas.style.cursor = "none"}window.addEventListener("mousemove", function(evt) {//移动鼠标变更反弹板位置var x = evt.clientX - cRect.leftif (x < 50) {board.x = 0} else if (x > 750) {board.x = 700} else {board.x = x - 50}console.log(x)})function newgame() {//初始化游戏ball = {//默认的弹球位置，随机方向sx: 400,sy: 300,}ball.vx = (0.5 - Math.random()) * speedball.vy = Math.sqrt(speed * speed - ball.vx * ball.vx)score = 0blocks = []for (var i = 0; i < 10; i++) {//生成砖块for (var j = 0; j < 6; j++) {blocks.push({x: i,y: j,color: colors[parseInt(Math.random() * colors.length)]})}}}function draw() {ctx.clearRect(0, 0, 800, 600)for (var i = 0; i < blocks.length; i++) {//绘制砖块block = blocks[i]ctx.fillStyle = block.colorctx.fillRect(block.x * 80 + 1, block.y * 30 + 1, 79, 29)if (ball.sx + 10 > block.x * 80 + 1 && ball.sx - 10 < block.x * 80 + 80 && ball.sy + 10 > block.y * 30 + 1 && ball.sy - 10 < block.y * 30 + 30) {//砖块碰撞判断if (ball.sx > block.x * 80 + 80 || ball.sx < block.x * 80) {//左右方向碰撞则改变x轴运行方向ball.vx = -ball.vx} else if (ball.sy > block.y * 30 + 30 || ball.sy < block.y * 30) {//垂直方向碰撞则改变Y轴运行方向ball.vy = -ball.vy}if (ball.color == block.color) {//同色碰撞则加10分score += 10} else {//非同色碰撞加1分score++}ball.color = block.color //撞击后球的颜色变成砖块颜色blocks.splice(i, 1) //碰撞后砖块消失for (var f = 0; f < 50; f++) {//生成火花fires.push({sx: block.x * 80 + 40,sy: block.y * 30 + 15,color: block.color,vx: 0.5 - Math.random(),vy: 0.5 - Math.random(),age: 100})}}}ctx.fillStyle = "white" //绘制分数ctx.font = "20px sans-serif"ctx.fillText(score, 5, 25)ctx.fillRect(board.x, board.y, board.long, 20) //绘制反弹板ctx.beginPath() //绘制小球ctx.fillStyle = ball.colorctx.arc(ball.sx, ball.sy, 10, 0, 2 * Math.PI)ctx.fill()if (rungame) {//判断游戏运行状态，并刷新球的位置ball.sx += ball.vx * 5ball.sy += ball.vy * 5if (ball.sy < 10) {//上边缘碰撞判断ball.vy = -ball.vy}if (ball.sx < 10 || ball.sx > 795) {//左右碰撞判断ball.vx = -ball.vx}if (ball.sy > 570 && ball.sx > board.x && ball.sx < board.x + board.long) {//反弹板碰撞判断ball.vx = (ball.sx - (board.x + board.long / 2)) / board.long / 2 * speed * 3ball.vy = -Math.sqrt(speed * speed - ball.vx * ball.vx)speed = speed * 1.001for (var f = 0; f < 20; f++) {fires.push({sx: ball.sx,sy: ball.sy + 10,color: colors[parseInt(Math.random() * colors.length)],vx: 0.5 - Math.random(),vy: Math.random() - 1,age: 60})}}if (ball.sy > 590 || blocks.length <= 0) {//碰撞到底部或所有砖块都消失则游戏停止运行rungame = falserun.style.display = "flex"canvas.style.cursor = "default"for (var f = 0; f < 150; f++) {fires.push({sx: 400,sy: 300,color: colors[parseInt(Math.random() * colors.length)],vx: 0.5 - Math.random(),vy: 0.5 - Math.random(),age: 560})}}}for (var i = 0; i < fires.length; i++) {fire = fires[i]ctx.fillStyle = fire.colorctx.fillRect(fire.sx, fire.sy, 2, 2)fire.age--if (fire.age < 0) {fires.splice(i, 1)}fire.sx += fire.vx * 2fire.sy += fire.vy * 2}}newgame()setInterval(draw, 1);
买不到的数目
小明开了一家糖果店。
他别出心裁：把水果糖包成4颗一包和7颗一包的两种。
糖果不能拆包卖。
小朋友来买糖的时候，他就用这两种包装来组合。
当然有些糖果数目是无法组合出来的，比如要买 10 颗糖。
你可以用计算机测试一下，在这种包装情况下，最大不能买到的数量是17。
大于17的任何数字都可以用4和7组合出来。
本题的要求就是在已知两个包装的数量时，求最大不能组合出的数字。
输入格式
两个正整数 n,m，表示每种包装中糖的颗数。
输出格式
一个正整数，表示最大不能买到的糖数。
数据范围
2≤n,m≤1000，
保证数据一定有解。
输入样例：
4 7
输出样例：
17
算法思路：
先开一个bool类型dp数组，dp[i]表示能否组成i。
两个数据分别是n,m，假定最小值是minn，最大值是maxx，那么就相当于从minn开始，不断往前走，每走到一个数，都要看看dp[i - n]或者dp[i - m]是否为true，如果是，则置true，反之我们需要更新ans，ans就是指最大不能买的数目，也就是我们最后的输出，循环结束，便可直接输出ans.
特解答案：
#include<iostream>using namespace std;int main(){int a, b;cin >> a >> b;cout << a * b - a - b;return 0;}
正常解C++
#include <iostream>#include <algorithm>using namespace std;int n, m, minn, maxx, ans;bool dp[1000000];int main() {cin >> n >> m;dp[0] = true;minn = min(n, m);maxx = max(n, m);for (int i = minn; i < n * m; i++) {if (dp[i - minn]) {dp[i] = true;} else if (i >= maxx && dp[i - maxx]) {dp[i] = true;} else {ans = i;}}cout << ans;return 0;}
正常解Java
import java.util.*;public class Main{static int N = 1000010;static boolean [] f = new boolean [N];public static void main(String[] args) {Scanner in = new Scanner (System.in);int n = in.nextInt();int m = in.nextInt();int mi = Math.min(n, m);int ma = Math.max(n, m);int res = 0;f[0] = true;for (int i = mi; i <= n * m; ++ i){if (f[i - mi]) f[i] = true;else if (i >= ma && f[i - ma]) f[i] = true;else res = i;}System.out.println(res);}}
