Shwoomple
/
Asteroids
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

remake asteroids and player classes

master
Milan Suman 2022-08-02 13:08:18 +05:30
parent e6c9ee31fc
commit 3d77e05006
4 changed files with 58 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/index.js
View File

@ -1,9 +1,40 @@
import * as paper from "paper";
let objects = [];
class Asteroid{
constructor(size, position, velocity=new paper.Point(0, 0)){
this.size = size;
this.position = position;
this.velocity = velocity;
this.path = new paper.Path.RegularPolygon(this.position, Math.max(4, Math.ceil(Math.random()*10)), this.size);
this.path.strokeColor = "#ffffff";
objects.push(this);
}
update(){
this.position = this.position.add(this.velocity);
this.path.position = this.position;
if(this.position.x > canvas.width + this.size){
this.position = new paper.Point(-this.size, this.position.y);
}else if(this.position.x < -this.size){
this.position = new paper.Point(canvas.width+this.size, this.position.y);
}
if(this.position.y > canvas.height + this.size){
this.position = new paper.Point(this.position.x, -this.size);
}else if(this.position.y < -this.size){
this.position = new paper.Point(this.position.x, canvas.height+this.size);
}
}
}
class Ship{
constructor(size, position){
this.size = size;
this.position = position;
this.rotation = 0;
this.nodes = [
new paper.Point(this.position.x, this.position.y-this.size),
new paper.Point(this.position.x+this.size/2, this.position.y),
@ -12,11 +43,24 @@ class Ship{
];
this.path = new paper.Path(this.nodes);
this.path.strokeColor = "#333333";
this.path.strokeColor = "#ffffff";
objects.push(this);
}
update(){
this.path.rotate(3);
this.path.rotate(this.rotation);
if(this.position.x > canvas.width + 30){
this.position = new paper.Point(-this.size, this.position.y);
}else if(this.position.x < -this.size){
this.position = new paper.Point(canvas.width+this.size, this.position.y);
}
if(this.position.y > canvas.height + 30){
this.position = new paper.Point(this.position.x, -this.size);
}else if(this.position.y < -this.size){
this.position = new paper.Point(this.position.x, canvas.height+this.size);
}
}
};
@ -27,7 +71,12 @@ canvas.height = window.innerHeight;
paper.setup(canvas);
const ship = new Ship(30, new paper.Point(canvas.width/2, canvas.height/2));
for(let i=0; i<30; i++){
new Asteroid(30, new paper.Point(30, 40), new paper.Point(Math.random()*5, Math.random()*5));
}
paper.view.onFrame = (event) => {
ship.path.rotate(3);
objects.forEach(elem => {
elem.update();
});
}

4
webroot/index.css
View File

@ -4,4 +4,8 @@
body{
margin: 0px;
width: 100vw;
height: 100vh;
background-color: #020202;
overflow: hidden;
}

1
webroot/index.html
View File

@ -4,6 +4,7 @@
<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="index.css">
<title>Asteroids</title>
</head>
<body>

2
webroot/index.js
View File

@ -36,7 +36,7 @@ eval("var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPAC
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var paper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! paper */ \"./node_modules/paper/dist/paper-full.js\");\n/* harmony import */ var paper__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(paper__WEBPACK_IMPORTED_MODULE_0__);\n\n\nclass Ship{\n constructor(size, position){\n this.size = size;\n this.position = position;\n this.nodes = [\n new paper__WEBPACK_IMPORTED_MODULE_0__.Point(this.position.x, this.position.y-this.size),\n new paper__WEBPACK_IMPORTED_MODULE_0__.Point(this.position.x+this.size/2, this.position.y),\n new paper__WEBPACK_IMPORTED_MODULE_0__.Point(this.position.x-this.size/2, this.position.y),\n new paper__WEBPACK_IMPORTED_MODULE_0__.Point(this.position.x, this.position.y-this.size) \n ];\n\n this.path = new paper__WEBPACK_IMPORTED_MODULE_0__.Path(this.nodes);\n this.path.strokeColor = \"#333333\";\n }\n\n update(){\n this.path.rotate(3);\n }\n};\n\n//initialization\nconst canvas = document.getElementById(\"canvas\");\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\npaper__WEBPACK_IMPORTED_MODULE_0__.setup(canvas);\n\nconst ship = new Ship(30, new paper__WEBPACK_IMPORTED_MODULE_0__.Point(canvas.width/2, canvas.height/2));\n\npaper__WEBPACK_IMPORTED_MODULE_0__.view.onFrame = (event) => {\n ship.path.rotate(3);\n}\n\n//# sourceURL=webpack:///./src/index.js?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var paper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! paper */ \"./node_modules/paper/dist/paper-full.js\");\n/* harmony import */ var paper__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(paper__WEBPACK_IMPORTED_MODULE_0__);\n\n\nlet objects = [];\n\nclass Asteroid{\n constructor(size, position, velocity=new paper__WEBPACK_IMPORTED_MODULE_0__.Point(0, 0)){\n this.size = size;\n this.position = position;\n this.velocity = velocity;\n this.path = new paper__WEBPACK_IMPORTED_MODULE_0__.Path.RegularPolygon(this.position, Math.max(4, Math.ceil(Math.random()*10)), this.size);\n this.path.strokeColor = \"#ffffff\";\n objects.push(this);\n }\n\n update(){\n this.position = this.position.add(this.velocity);\n this.path.position = this.position;\n\n if(this.position.x > canvas.width + this.size){\n this.position = new paper__WEBPACK_IMPORTED_MODULE_0__.Point(-this.size, this.position.y);\n }else if(this.position.x < -this.size){\n this.position = new paper__WEBPACK_IMPORTED_MODULE_0__.Point(canvas.width+this.size, this.position.y);\n }\n\n if(this.position.y > canvas.height + this.size){\n this.position = new paper__WEBPACK_IMPORTED_MODULE_0__.Point(this.position.x, -this.size);\n }else if(this.position.y < -this.size){\n this.position = new paper__WEBPACK_IMPORTED_MODULE_0__.Point(this.position.x, canvas.height+this.size);\n }\n }\n}\n\nclass Ship{\n constructor(size, position){\n this.size = size;\n this.position = position;\n this.rotation = 0;\n this.nodes = [\n new paper__WEBPACK_IMPORTED_MODULE_0__.Point(this.position.x, this.position.y-this.size),\n new paper__WEBPACK_IMPORTED_MODULE_0__.Point(this.position.x+this.size/2, this.position.y),\n new paper__WEBPACK_IMPORTED_MODULE_0__.Point(this.position.x-this.size/2, this.position.y),\n new paper__WEBPACK_IMPORTED_MODULE_0__.Point(this.position.x, this.position.y-this.size) \n ];\n\n this.path = new paper__WEBPACK_IMPORTED_MODULE_0__.Path(this.nodes);\n this.path.strokeColor = \"#ffffff\";\n objects.push(this);\n }\n\n update(){\n this.path.rotate(this.rotation);\n\n if(this.position.x > canvas.width + 30){\n this.position = new paper__WEBPACK_IMPORTED_MODULE_0__.Point(-this.size, this.position.y);\n }else if(this.position.x < -this.size){\n this.position = new paper__WEBPACK_IMPORTED_MODULE_0__.Point(canvas.width+this.size, this.position.y);\n }\n\n if(this.position.y > canvas.height + 30){\n this.position = new paper__WEBPACK_IMPORTED_MODULE_0__.Point(this.position.x, -this.size);\n }else if(this.position.y < -this.size){\n this.position = new paper__WEBPACK_IMPORTED_MODULE_0__.Point(this.position.x, canvas.height+this.size);\n }\n }\n};\n\n//initialization\nconst canvas = document.getElementById(\"canvas\");\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\npaper__WEBPACK_IMPORTED_MODULE_0__.setup(canvas);\n\nconst ship = new Ship(30, new paper__WEBPACK_IMPORTED_MODULE_0__.Point(canvas.width/2, canvas.height/2));\nfor(let i=0; i<30; i++){\n new Asteroid(30, new paper__WEBPACK_IMPORTED_MODULE_0__.Point(30, 40), new paper__WEBPACK_IMPORTED_MODULE_0__.Point(Math.random()*5, Math.random()*5));\n}\n\npaper__WEBPACK_IMPORTED_MODULE_0__.view.onFrame = (event) => {\n objects.forEach(elem => {\n elem.update();\n });\n}\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ }),